<style>
.t_judul{
        
        padding:12px;
        font-size:16px;
        font-weight:bold;
        margin-bottom: 10px;
        padding-bottom: 20px;
}

.t_header{
        background:#dddddd;
        vertical-align: middle;
        padding:3px;
        text-align: center;
        border: solid 1px;
        font-weight: bold;
}

.t_isi{
        vertical-align: middle;
        padding:9px;
        /*border: solid 1px;*/
        font-weight: bold;
}

.kosong{
        background-color: white;
}

.kuning{
        background-color: yellow;
}

.pagination { 
        text-align: right;
        padding: 20px 0 5px 0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
}

.pagination a {
        margin: 0 5px 0 0;
        padding: 3px 6px;
}

.pagination a.number {
        border: 1px solid #ddd;
}

.pagination a.current {
        background-color: red;
        border-color: #459300 !important;
        color: #fff !important;
}

.pagination a.current:hover {
        text-decoration: underline;
}
.ui-autocomplete-loading { background: white url('<?=base_url()?>file/images/ui-anim_basic_16x16.gif') right center no-repeat; }

</style>
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/gray/easyui.css">
<link rel="stylesheet" type="text/css" href="<?= base_url() ?>file/js/easyui/themes/icon.css">

<script type="text/javascript">
var test = 2;
var hasSalesId = false;
var tempUG;

function cekHasSalesId(tempID)
{
	if (hasSalesId == false)
	{	
		alert("Please fill the proper Sales Person!");		
		$('#sales_person').val("");
		$("#"+tempID).val("");
		return false;
	}
}


function addCommas(nStr)
{
	nStr += '';
	x = nStr.split('.');
	x1 = x[0];
	x2 = x.length > 1 ? '.' + x[1] : '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + '.' + '$2');
	}
	return x1 + x2 + ",00";
}

//update field-field pada suatu row setelah field iccid diisi
function updateValue(soide)
{
	var iccid = null;
	var iccid = document.getElementById("iccid_"+soide).value;
	var flag = false;
	
	tempIccid = $("#iccid_"+soide).val();
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showproductmdn/"+iccid,
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
					$("#item_name_"+soide).val(n["item_name"]);
					$("#item_id_"+soide).val(n["iccid"]);
					flag = true;
			});	
		},
		error: function(data){	
		}
	});

	if (flag == false)
	{
		$("#item_name_"+soide).val("");
		$("#item_group_name_"+soide).val("");
		//$("#price_"+soide).val("");	
	}
}


//ambil daftar iccid untuk ditampilkan pada textbox autocomplete
function getIccid(varTest)
{	
	$("#iccid_"+varTest).autocomplete({
		source: function(request, response){
			$.post(
				"<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showmdn/"+tempIccid, 
				{data:request.term}, 
				function(data){     
					response($.map(data, function(item) {
						return {
							label: item.iccid,
							value: item.iccid
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 2,
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValue(varTest);
		return false;
		}
	});
}

//delete row yang diceklis
function delete_checked(tableID) {
	try {
		var table = document.getElementById(tableID);
		var rowCount = table.rows.length;
		
		for(var i=1; i<rowCount; i++) {
			var row = table.rows[i];
			if (row.cells[0] != null)
			{
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}
			}
		}
	}catch(e) {
		alert(e);
	}
}

////////////proses untuk sales
//update field-field pada suatu row setelah field iccid diisi
function updateValueSales(soide)
{
	var dsales = null;
	var dsales = document.getElementById("dsales").value;
	var flag = false;
	
	tempIccid = $("#dsales").val();
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showsales/"+dsales+"/full",
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
					//$("#log").val(n["user_name"]);
					document.getElementById("log").innerHTML = n["user_name"];
					flag = true;
			});	
		},
		error: function(data){	
		}
	});

	if (flag == false)
	{
		$("#log").val("");
	}
}


//ambil daftar iccid untuk ditampilkan pada textbox autocomplete
function getSales()
{	
	$("#dsales").autocomplete({
		source: function(request, response){
			$.post(
				"<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showsales/"+tempIccid, 
				{data:request.term}, 
				function(data){
					response($.map(data, function(item) {
						return {
							label: item.user_id +' :: '+ item.user_name,
							value: item.user_id
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 2,
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValueSales();
		return false;
		}
	});
}

////////////proses untuk outlet
//update field-field pada suatu row setelah field iccid diisi
function updateValueOutlet(soide)
{
	var doutlet = null;
	var doutlet = document.getElementById("doutlet").value;
	var flag = false;
	
	tempIccid = $("#doutlet").val();
	
	$.ajax({
		url: "<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showoutlet/"+doutlet+"/full",
		dataType:"json",
		success:function(data){
			$.each(data, function(i,n){
					document.getElementById("logOutlet").innerHTML = n["outlet_name"];
					flag = true;
					
						var nilai = n["outlet_id"];
						$.post(
							'<?=base_url()?>index.php/klaim_kartu_garansi/showfrontliner', 
							{nilai:nilai},
							function(data) {
								if(data.status == 'OK'){
									document.getElementById("divFrontliner").innerHTML = data.pesan;
									return;
								}
							},
							"json"
						).error(function() {
							alert("-");
						});
					
			});	
		},
		error: function(data){	
		}
	});

	if (flag == false)
	{
		$("#log").val("");
	}
}


//ambil daftar iccid untuk ditampilkan pada textbox autocomplete
function getOutlet()
{	
	$("#doutlet").autocomplete({
		source: function(request, response){
			$.post(
				"<?php echo base_url(); ?>index.php/klaim_kartu_garansi/showoutlet/"+tempIccid, 
				{data:request.term}, 
				function(data){
					response($.map(data, function(item) {
						return {
							label: item.outlet_id +' :: '+ item.outlet_name,
							value: item.outlet_id
						}
					}))
				}, 
				"json"
			);
		},
		minLength: 2,
		dataType: "json",
		cache: false,
		focus: function(event, ui) {
			return false;
		},
		select: function(event, ui) {
			this.value = ui.item.label;
			updateValueOutlet();
		return false;
		}
	});
}
</script>

<script type="text/javascript">                    
    $(document).ready(function() {
        $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
        $("#datepicker2").datepicker({dateFormat: 'yy-mm-dd'});
		
		$('#add').live("click",function() {
			var nilai      = $("#klaim").attr('value');
			
			$.post(
				'<?=base_url()?>index.php/klaim_kartu_garansi/showklaim', 
				{nilai:nilai},
				function(data) {
					if(data.status == 'OK'){
							document.getElementById("divKlaim").innerHTML = data.pesan;
					}
				},
				"json"
			).error(function() {
				alert("-");
			});
		});
		
		$('#save').live("click",function() {
			
			var sales= $("#dsales").attr('value');
			var outlet= $("#doutlet").attr('value');
			var frontliner= $("#frontliner").attr('value');
			var tanggal= $("#datepicker").attr('value');
			var program= $("#program").attr('value');
			//var mdn = new Array();
				//mdn = $('#iccid').attr('name');
			var mdn = $(".iccid").serializeArray();
			$.post(
				'<?=base_url()?>index.php/klaim_kartu_garansi/saveklaimoutlet', 
				{sales:sales,outlet:outlet,frontliner:frontliner,tanggal:tanggal,program:program,mdn:mdn},
				function(data) {
					if(data.status == 'ERROR'){
							alert(data.pesan);
					}else if(data.status == 'OK') {
                        window.location = "<?=base_url()?>index.php/klaim_kartu_garansi"
					}
				},
				"json"
			).error(function() {
				alert("-");
			});
		});
		
		$("#dialog-form").dialog({
				autoOpen: false,
				height: 300,
				width: 350,
				modal: true,
				buttons: {
					'Simpan Data': function () {
						var nama= $("#user-name").attr('value');
						//var id= $("#user-id").attr('value');
						var outlet_id= $("#outlet").attr('value');
						var nilai= $("#outlet").attr('value');
						$.post(
								'<?=base_url()?>index.php/klaim_kartu_garansi/savefrontliner', 
								{nama:nama,outlet_id:outlet_id,nilai:nilai},
								function(data) {
									if(data.status == 'OK'){
											document.getElementById("divFrontliner").innerHTML = data.pesan;
											$("#dialog-form").dialog("close");
											return false;
									}
								},
								"json"
						).error(function() {
								alert("-");
						});
					},
					Cancel: function () {
						$(this).dialog('close');
					}
				},
				close: function () {
					allFields.val('').removeClass('ui-state-error');
				}
			});
		
		$('#dialog-form-open').live("click",function() {
			$("#dialog-form").dialog("open");
			return false;
		});
		
		//tambah row sesuai kebutuhan
		$('#quantityImg').click(function(){
			var test=1;
			s1 = document.getElementById("quantity").value;
			//"<td><input type='text' style='text-align:left;' id='dproduk_' name='produk[]' value='' size='30%' onkeyup='getPr()' /></td>"+
			for(jj=0;jj<s1;jj++)
			{
				add_tuple = "<tr align='center' id='new_tuple"+test+"' class='wide'>"+
					"<td><input type='checkbox'/></td>"+
					"<td><input type='text' style='text-align:left;' id='iccid_"+test+"' name='iccid[]' class='iccid' value='' size='30%' onkeyup='updateValue("+test+")' onfocus='getIccid("+test+")'/></td>"+
					"<td><input type='text' style='text-align:left;' id='item_id_"+test+"' name='item_id[]' readonly='readonly' value=''/></td>"+
						"<td><input type='text' style='text-align:left;' id='item_name_"+test+"' name='item_name[]'  readonly='readonly' size='50%' value=''/></td>"+
						"<td><input type='hidden' style='text-align:right;' id='price_"+test+"' name='price[]' readonly='readonly' value=''/></td>"+
				"</tr>";
				$('#bodyTable').append(add_tuple);
				test++;
			}
		});
		
    });
</script>


<div class="box">
        <!-- box / title -->
        <div class="title">
                <h5>Klaim Kartu Garansi outlet</h5>
                <ul class="links">
                        <!-- <li><a href="<?=base_url()."index.php/".$this->uri->segment(1)?>/index/add">New</a></li>
                        <li><a href="<?=base_url()."index.php/".$this->uri->segment(1)?>">List Data</a></li> -->
                </ul>
        </div>
        <!-- end box / title -->
        
		
		<?php
        $msg = $this->session->flashdata('message');
        if($msg <> ""){
              echo'<div id="box-messages">
                        <div class="messages">
                                <div id="message-success" class="message message-success">
                                        <div class="image">
                                                <img src="'. base_url() .'file/shell/smooth/resources/images/icons/success.png" alt="Success" height="32" />
                                        </div>
                                        <div class="text">
                                                <h6>'. $msg .'</h6>
                                        </div>
                                        <div class="dismiss">
                                                <a href="#message-success"></a>
                                        </div>
                                </div>
                        </div>
                </div>';
        }
        ?>
		
		<form id="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
		<div class="form">
				<div class="fields">
						
						<div class="field">
								<div class="label" style="padding-top:0;">
										<label for="region">Path Territori:</label>
								</div>
								<div class="input">
										<label id="region"><b><?=$this->mglobal->getTerritoryPath()?></b></label>
								</div>
						</div>
						
						<div class="field">
								<div class="label">
										<label for="keterangan">Sales:</label>
								</div>
								<div class="input">
										
										<input id="dsales" name='dsales' value='' onkeyup='updateValueSales()' onfocus='getSales()' />
										<div id="log" style="height: 30px; width: 300px; overflow: auto; margin: 3px;size:12px;padding:5px;"></div>
								</div>
						</div>
						<div class="field">
								<div class="label">
										<label for="keterangan">Outlet:</label>
								</div>
								<div class="input" id="divOutlet">
										<input id="doutlet" name='doutlet' value='' onkeyup='updateValueOutlet()' onfocus='getOutlet()' />
										<div id="logOutlet" style="height: 30px; width: 300px; overflow: auto; margin: 3px;size:12px;padding:5px;"></div>
								</div>
						</div>
						<div class="field">
								<div class="label">
										<label for="keterangan">Frontliner:</label>
								</div>
								<div class="input" id="divFrontliner">
										<select name=cluster id=cluster>
											<option value=''>Pilih</option>
										</select>
								</div>
						</div>
						<div class="field">
								<div class="label">
										<label for="keterangan">Claim Date:</label>
								</div>
								<div class="input">
										<input type="text" id="datepicker" name="stock" class="medium" value="<?=$tanggal?>" style="width:120px;margin:0;" />
								</div>
						</div>
						<div class="field">
								<div class="label">
										<label for="keterangan">Program:</label>
								</div>
								<div class="input">
										<select name=program id=program>
											<option value=''>Pilih</option>
											<?php
											foreach($getProgram->result() as $r){
												echo'<option value="'.$r->mvalue.'">'.$r->mdisplay.'</option>';
											}
											?>
										</select>
								</div>
						</div>
						
						<div class="field">
								<div class="label">
										<label for="keterangan">Total Claim:</label>
								</div>
								<div class="input">
                                        <input type="text" id="quantity" name="quantity" class="small" />	
										<a><img id="quantityImg" height="20px" style="margin-left:1%;" src="<?= base_url() ?>file/js/easyui/themes/icons/addRow.png" /></a>
								</div>
						</div>
						
				</div>
		</div>
		</form>&nbsp;
		
		<div class="child-panel-body" style="margin-top: 1%;">	
            <table id="table-updateable" class="table-right-panel" width="92%" style="margin-left: 19px;">
                <thead>
					<tr align="center" class="tr-colour3" border=1>
						<th width="40px">No.</th>
						<th width="300">ICCID</th>
						<th>Kode Produk</th>
						<th width=200>Nama Produk</th>
						<th></th>
					</tr>
				</thead>
				<tbody id="bodyTable">
					
				</tbody>
            </table>
				
            <div class="summary"> 
            </div>
			
		</div>
		
		<div class="buttons">
				<input type="button" onclick="delete_checked('table-updateable')" value="Remove" />
				<input type="button" name="save" id="save" value="Simpan " />
		</div>
</div>

<div id="dialog-form" title="Create new frontliner">
<p>Semua kolom harus diisi.</p>
<form action="" method="post">
<div class="form">
	<div class="fields">
		<div class="field field-first">
			<div class="label">
				<label for="input">Nama Frontliner:</label>
			</div>
			<div class="input">
				<input type="text" id="user-name" name="user.name" />
			</div>
		</div>
	</div>
</div>
</form>
</div>